<template>
    <div class="formbox">
        <span style="font-size: 18px; margin-bottom: 20px;display: inline-block;">输入渔具信息</span>
        <span class="x" @click="handleClose">X</span>
        <el-form :model="gear" ref="gear" :rules="rules" label-position="left" label-width="70px" size="medium">
        <el-form-item  prop="gearname" label="品牌">
            <el-input v-model="gear.gearname" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item   prop="geartype" label="类型">
            <el-select v-model="gear.geartype" placeholder="请选择" :style="{width: '100%'}">
                <el-option v-for="(item) in select_1708588346257_data" :key="item.value" :label="item.label" :value="item.value" :disabled="!!item.disabled"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item  prop="buytime" label="日期">
            <el-date-picker
            v-model="gear.buytime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择购买时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item  prop="description" label="备注">
            <el-input v-model="gear.description" placeholder="请输入" clearable></el-input>
        </el-form-item>
    </el-form>
    <div class="btns">
        <el-button type="primary" @click="submitForm('gear')">修改</el-button>
        <el-button @click="resetForm">取消</el-button>
    </div>
    </div>
</template>
<script>
import {AddGearInfo,GetGearInfo,UpdateGearInfo} from '../request/api'
import { mapState ,mapActions,mapMutations} from 'vuex';
import _ from 'lodash';
import Vue from 'vue';
    export default {
        components: {

        },
        props:['gearinfo'],
        data() {
            return {
                select_1708588346257_data: [{
                    label: '鱼竿',
                    value: '鱼竿',
                    disabled: false
                }, {
                    label: '鱼饵',
                    value: '鱼饵',
                    disabled: false
                }, {
                    label: '鱼线',
                    value: '鱼线',
                    disabled: false
                }, {
                    label: '鱼漂',
                    value: '鱼漂',
                    disabled: false
                }, {
                    label: '鱼钩',
                    value: '鱼钩',
                    disabled: false
                }, {
                    label: '其他',
                    value: '其他',
                    disabled: false
                }],
                rules:{
                    gearname:[{ required: true, message: '请输入装备名称', trigger: 'blur' }],
                    geartype:[{ required: true, message: '请选择装备类型', trigger: 'blur' }],
                    buytime:[{ required: true, message: '请选择购买时间', trigger: 'blur' }],
                    description:[],
                }
            };
        },
        computed: {
            ...mapState({
                gearInfo:state => state.gearStatus.gearInfo,
                isShowAdd:state => state.gearStatus.isShowAdd,
                isShowUpdate:state => state.gearStatus.isShowUpdate,
                userInfo:state => state.userInfo.userInfo,
            }),
            gear(){
                const deepInfo = _.cloneDeep(this.gearinfo)
                const reactiveInfo = Vue.observable(deepInfo);
                return reactiveInfo
            }
        },
        methods: {
            ...mapActions({
                asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
            }),
            ...mapMutations({
                setIsShowUpdate:'gearStatus/setIsShowUpdate',
                setGearInfo:'gearStatus/setGearInfo',
            }),
            // 重置
            resetForm(){
                this.setIsShowUpdate(false)
            },
            submitForm(formName){
                this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 发送请求
                    let params = {
                        ...this.gear,
                        userid:this.userInfo.userid
                    }
                    let res =await UpdateGearInfo(params)
                    if(res.data.state == 200){
                        // 提示成功
                        this.asyncChangeIsShowToast({
                          msg:'修改成功',
                          type:'success'  
                        })
                        // 更新vuex数据
                        let gearinfo1 = await GetGearInfo()
                        this.setGearInfo(gearinfo1.data.data)
                        // 关闭form
                        this.setIsShowUpdate(false)
                        this.$router.push('/other/gear')
                    }
                } else {
                    // 提示失败
                    this.asyncChangeIsShowToast({
                        msg:'信息不能有空！',
                        type:'error'
                    })
                    return false;
                }
                });

               
            },
            handleClose(){
                this.setIsShowUpdate(false)
            }

        },
        mounted() {
            console.log("udate",this.gear)
        }
    }
</script>
<style scoped>
.formbox{
    width: 500px;
    height: 350px;
    background-color: grey;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
}
.x{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}
.btns{
    position: absolute;
    right: 30px;
    bottom: 10px;
    margin-top: 20px;
}
</style>